<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div id="">
			<input type="checkbox" class = "manyCheck">唱&nbsp;
			<input type="checkbox" class = "manyCheck">跳&nbsp;
			<input type="checkbox" class = "manyCheck">rap&nbsp;
			<input type="checkbox" class = "manyCheck">篮球&nbsp; <br/>
			<input type="checkbox"  id = "check" />全选&nbsp;
			<button type="button" id = "reverse">反选</button>
		</div>
	</body>
	<script type="text/javascript">
		function checkSelect () {
			var arr = document.getElementsByClassName("manyCheck");
			var flag = document.getElementById("check").checked;
			for (var i = 0; i < arr.length; i++) {
				arr[i].checked = flag;
			}
		}
		function checkReverse () {
			var arr = document.getElementsByClassName("manyCheck");
			for (var i = 0; i < arr.length; i++) {
				if(arr[i].checked == true){
					arr[i].checked = false;
				}else{
					arr[i].checked = true;
				}
			}
		}
		document.getElementById("check").onclick = checkSelect; 
		document.getElementById("reverse").onclick = checkReverse;
	</script>
</html>
